<template>
  <div class="form__container">
    <FormTitle>资质文件</FormTitle>
    <FormTable
      rowKey="localUUID"
      :buttons="pageData.buttons"
      :tableData="pageData.localData.qualificationFiles"
      :columns="pageData.columns"
    >
      <template #rowOperations="{ row }">
        <div v-if="row.hasDeleted === 0" class="form-table__row_operations">
          <!-- <t-link variant="text" theme="primary" @click="handleEditForm(row)">修改</t-link> -->
          <t-link variant="text" @click="handleDownloadForm(row)">下载</t-link>
          <t-link variant="text" theme="danger" :disabled="readOnly" @click="handleDeleteForm(row)">删除</t-link>
        </div>
        <div v-if="row.hasDeleted === 1">
          <t-link variant="text" theme="danger" disabled>此文件已经被标记为删除</t-link>
        </div>
      </template>
    </FormTable>
  </div>
  <UploadQualifications
    v-if="pageData.showNewForm"
    :showDialog="pageData.showNewForm"
    @onConfirm="handleFormConfirm"
    @onClose="pageData.showNewForm = false"
  />
</template>

<script setup lang="tsx">
// 框架和组件库
import { defineAsyncComponent, reactive, watch } from "vue";
import { MessagePlugin, type TableProps } from "tdesign-vue-next";

// 工具函数
import dayjs from "dayjs";
// import { v4 as uuidv4 } from "uuid";

// API
import { downloadFileStream } from "@/api/file";

// 动态组件
const UploadQualifications = defineAsyncComponent(() => import("./UploadQualifications.vue"));

const props = defineProps(["formData", "readOnly", "mode"]);
const emits = defineEmits(["updateData"]);

const pageData = reactive({
  buttons: [
    {
      name: "新建",
      icon: "add",
      disabled: props.readOnly,
      click: () => {
        handleNewForm();
      }
    }
  ],
  columns: [
    {
      colKey: "name",
      title: "文件名",
      width: 200
    },
    {
      colKey: "remark",
      title: "文件说明",
      width: 200
    },
    {
      colKey: "createdByName",
      title: "上传人",
      width: 200
    },
    {
      colKey: "createdTime",
      title: "上传时间",
      width: 200,
      cell: (h, { row }) => {
        if (row.createdTime === null || row.createdTime === "") {
          return "没有记录";
        }
        return dayjs(row.createdTime).format("YYYY-MM-DD HH:mm:ss");
      }
    }
  ] as TableProps["columns"],
  localData: { ...props.formData },
  showNewForm: false,
  showEditForm: false,
  editFormMode: "new",
  editFormData: {}
});

// const initFormData = () => {
//   if(props.mode !== 'new'){

//   }
// };

const handleNewForm = () => {
  pageData.showNewForm = true;
  pageData.editFormMode = "new";
};

const handleDownloadForm = async (row: Record<string, any>) => {
  await downloadFileStream(row.id);
};

const handleDeleteForm = async (row: Record<string, any>) => {
  const index = pageData.localData.qualificationFiles.findIndex((item: Record<string, any>) => item.id === row.id);
  if (index > -1) {
    pageData.localData.qualificationFiles[index].hasDeleted = 1;
    pageData.localData.deletedQualFileIds.push(row.id);
  }
};

const handleFormConfirm = (newData: Record<string, any>) => {
  pageData.localData.qualificationFiles = [...pageData.localData.qualificationFiles, ...newData.data];
  MessagePlugin.success("上传成功！");
  pageData.showNewForm = false;
};

watch(
  () => pageData.localData,
  (newData) => {
    emits("updateData", newData);
  },
  { deep: true, flush: "post" }
);

// pageData.localData = { ...props.formData };

// initFormData();
</script>
